<!DOCTYPE html>
<!-- supperss ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./yb_system_css/reset.css">
    <link rel="stylesheet" href="./yb_system_css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="./yb_system_css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="./yb_system_css/usercenter(1).css">

    <script src="./yb_system_js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="./yb_system_js/common.js"></script>
    <script src="./yb_system_js/jquery-3.5.1.min.js"></script>
    <script src="./yb_system_js/footfixed.js"></script>

    <script src="./yb_system_js/layer.js"></script>
    <link rel="stylesheet" href="./yb_system_css/layer.css" id="layuicss-layer">
    <title>个人中心</title>

</head>
<body>
<div class="content">

    <div th:replace="public :: header"></div>

    <div class="content-main">
        <div class="main-info">
            <div class="main-user-left">
                <div class="user-left-card info-card">
                    <div class="user-img"><img th:src="@{${userMember.photoPath != null ? userMember.photoPath : './yb_system_picture/user_Default.png'}}"></div>
                    <div class="usertop-for-phone">
                        <div class="user-name" th:text="${userMember.nickname}"></div>
                        <div class="user-style" th:text="${userMember.motto}">不要做懒人，给自己一个介绍吧</div>
                    </div>
                </div>
                <div class="user-left-card">
                    <div class="card-flex">
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.questionNum}">0</span><span>提问</span></a></div>
                        <div class="line"></div>
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.answerNum}">0</span><span>回答</span></a></div>
                        <div class="line"></div>
                        <div class="user-inter"><a href="javascript:"><span
                                class="user-inter-num" th:text="${userMember.articleNum}">0</span><span>文章</span></a></div>
                    </div>
                </div>
                <div class="user-left-card">
                    <div class="user-editor">
                        <a th:href="@{/personalHomepage}">
                            <img class="tip-img" src="./yb_system_picture/usercenter.png" alt="有贝口腔网">
                            <span>个人中心</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                    <div class="user-editor">
                        <a th:href="@{/personalDetail}">
                            <img src="./yb_system_picture/Write.png" alt="有贝口腔网">
                            <span>个人信息</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                    <div class="user-editor user-editor-active">
                        <a th:href="@{/messages}">
                            <img src="./yb_system_picture/notice-lan.png" alt="有贝口腔网">
                            <span>站内消息</span>
                            <img class="bottom-right" src="./yb_system_picture/arrow-bttom.png" alt="有贝口腔网">
                        </a>
                    </div>
                </div>
            </div>

            <div class="main-user-right">
                <div class="user-right-top">
                    <ul>
                        <li class="select-active" id="dy"><a href="javascript:;">站内消息</a></li>
                    </ul>
                </div>
                <div class="user-right-action">
                    <div id="myContent">
                    </div>
                    <div class="more-content">
                        <div class="load-more" style="display: none;">
                            <img src="./yb_system_picture/load-more.gif">
                            <span>加载中</span>
                        </div>
                        <div class="load-more-two load-more-fade" style="" onclick="moreList()">点击加载更多</div>
                        <div class="no-data" style="display:none">┭┮﹏┭┮,没有数据啦</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div th:replace="public::footer"></div>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</div>
<script>
    function editQaReply(obj) { //编辑回答
        var id = $(obj).attr("id");
        layer.open({
            type: 2,
            title: "编辑回答",
            shadeClose: false,
            area: ['900px', '600px'],
            fixed: true,
            maxmin: false,
            scrollbar: false,
            content: basePath + 'user/center/qaReply/edit/' + id
        });
    }

    function read(obj) { //删除回答
        var id = $(obj).attr("id").replace("r","");
        $.post(basePath + "updatePersonalMessage?id=" + id, function (data) {
            if (data.success) {
                layer.msg("已读");
                $("#r"+id).html("已读").attr('style','');
            } else {
                layer.msg(data.msg);
            }
        });
    }


    var current = 1;
    var tabId = "";

    //消息数据
    function msgList() {
        $(".load-more").show();
        $(".load-more-two").hide();
        $.post(basePath + "personalDylist?current=" + current, function (data) {
            $(".load-more").hide();
            //如果没有数据了就隐藏
            if (data.length == 0) {
                $(".load-more-two").hide();
                if (current == 1) {
                    $(".no-data").show();
                }
            } else {
                $(".load-more-two").show();
                $("#myContent").append(data);
            }
        });
    }

    function loadTabList() {
        if (tabId == 'msg') {//动态
            msgList();
        } else if (tabId == 'an') {// 回答

        }
    }

    //加载更多
    function moreList() {
        current++;
        loadTabList();
    }

    function initList() {
        tabId = 'msg';//动态
        msgList();
    }

    initList();//初始化

    //重新加载从第一页开始
    function initListPage1() {
        current = 1;
        $("#myContent").html("");
        $(".load-more-two").hide();
        $(".no-data").hide();
        loadTabList();
    }

    //点击tab标签
    $(".user-right-top li").click(function () {
        var id = $(this).attr("id");
        if (id == tabId) {
            return;
        }
        tabId = id;
        initListPage1();
        $("li").removeClass("select-active");
        $(this).addClass("select-active");
    })

    $(".change-info-show").hide();
    $(".change-info-btn").click(function () {
        $(".change-info-top").hide();
        $(".change-info-show").show();
    })
    $(".write-box-input").change(function () {
        var inputle = $(this).val().length;
        $(".write-box-span i").text(inputle);
    })
    $(".write-box-textarea").change(function () {
        var textareale = $(this).val().length;
        $(".write-box-right i").text(textareale);
    })
    $(".write-box-input").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-input").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })
    $(".write-box-textarea").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-textarea").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })


    $(".sure-btn").click(function () {
        var inputval = $(".write-box-input").val();
        var textareaval = $(".write-box-textarea").val();
        if (inputval == "" || textareaval == "") {
            alert("请输入信息");
            return false;
        }
        $(".h3-name").text(inputval);
        $(".p-style").text(textareaval);

        $(".change-info-show").hide();
        $(".change-info-top").show();
    })
    $(".close-btn").click(function () {
        $(".change-info-show").hide();
        $(".change-info-top").show();
    })

</script>


</body>
</html>